<template>

  <div class="cf">
    <div class="fll">
      <NMenu :options="menuOptions" :collapsed="collapsed" :inverted="inverted" default-value="1"
        @update:value="clickMenuItem" />
    </div>
    <div class="flr">
      <n-data-table :columns="columns" :data="data" :pagination="paginations" :bordered="false" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, reactive, onMounted, computed, defineComponent, h } from 'vue';
  import { anchorDark, useMessage, NButton } from 'naive-ui';
  import { renderIcon } from '@/utils/index';
  import { CaretUpOutlined } from '@vicons/antd';
  import { getUserInfo } from '@/api/Demo/Demo';
  import { useRoute } from 'vue-router';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
import { TOKEN_KEY } from '@/enums/cacheEnum';
  // import { ptVarListGets } from '@/api/GlobalVarMgt/GlobalVarMgt';   // todo open


  const settingStore = useProjectSettingStore();
  const message = useMessage();
  const emits = defineEmits(['send']);

  // 树结构数据
  let activeKey = ref < string | null > (null)
  let collapsed = ref(false)
  const menuOptions = [
    {
      label: '地域树结构',
      key: '0',
      icon: renderIcon(CaretUpOutlined),
      children: [
        {
          label: '1楼机房',
          key: '1',
        },
        {
          label: '2楼机房',
          key: '2',
        },
        {
          label: '3楼机房',
          key: '3',
        }
      ]
    }

  ]
  // 获取系统样式
  const inverted = computed(() => {
    return ['dark', 'header-dark'].includes(settingStore.navTheme);
  });
  // 点击树菜单项
  const clickMenuItem = (key: string) => {
    activeKey.value = key
  }


  // 标头数据
  const columns = [
    {
      title: '序号',
      key: 'index',
    },
    {
      title: '设备名称',
      key: 'device_name',
    },
    {
      title: '所属主机',
      key: 'host_name',
    },
    {
      title: '测点名称',
      key: 'point_name',
    },
    {
      title: '测点变量名称',
      key: 'point_var_name',
    },
  ];

  // 组件参数
  const props = defineProps({
    pageParam: {
      type: Object,
      required: true,
    },
  });

  // 获取当前路由
  const route = useRoute();
  // 从路由参数中获取 id
  const pageId = route.query.id;
  console.log('id', pageId);

  // 新增
  const add = (row) => {
    // 发送新增消息
    emits('send', 'openAddForm');
  };

  // 编辑
  const edit = (row) => {
    // 发送编辑消息
    emits('send', 'openEditForm', row);
  };

  // 刷新数据回调用方法
  function refresh(params) {
    // 判断params是否传递参数，传递参数需要保存，防止翻页丢失搜索条件
    if (params) {
      Object.assign(searchParams, params);
    }
    search(); // 重新获取列表数据
  }

  // 列表数据
  // id
  // device_name(设备名称)
  // host_name（所属主机）
  // point_name(测点名称)
  // point_var_name(测点变量名称)
  const data = ref([
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
    { id: '123', device_name: '设备名称',host_name: 'ZG100', point_name: '测点名称', point_var_name: '温湿度'},
   
  ]);
  // 保存搜索参数
  const searchParams = reactive({});
  // TABLE 列表总数量
  const total = ref(100);
  // 分页配置
  const paginations = reactive({
    page: 1,
    pageSize: 14,
    showQuickJumper: true,
    showSizePicker: true,
    showPages: true,
    size: 'large',
    pageSizes: [10, 20, 30],
    prefix:()=> `共${total.value}条`,
    onChange: (page: number) => {
      paginations.page = page
      search();
    },
    onUpdatePageSize: (pageSize: number) => {
      paginations.pageSize = pageSize
      paginations.page = 1
      search();
    },
  });

  // 列表获取数据
  const search = async () => {
    const params = { page: paginations.pageSize, pageSize:paginations.pageSize, ...searchParams };
    const res = await ptVarListGets(params);
    if(res.code === 200) { 
      data.value = res.data;
      total.value = res.total;
      return
    }
    message.error(res.msg);
  };

  function init() {
    // search();   // todo open
  }

  // 表格需要暴露出init、refresh方法
  defineExpose({
    init,
    refresh,
  });
</script>

<style lang="less" scoped>
  .flr {
    float: right;
    width: 85%;
  }

  .fll {
    float: left;
    width: calc(100% - 85% - 1px);
    height: calc(100vh - 145px);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
  }

  .cf:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
  }

  .cf {
    zoom: 1;
  }

  :v-deep .n-tabs.n-tabs--top .n-tab-pane {
    padding: 0 !important;
  }

  ::v-deep .n-menu .n-menu-item-content.n-menu-item-content--selected::before {
    background: linear-gradient(90deg, #1075C4 0%, rgba(5, 13, 21, 0) 100%);
  }

  ::v-deep .n-menu-item-content__arrow {
    display: none !important;
  }

  ::v-deep .n-data-table-tr .n-data-table-th {
    border: none;
    background: #0E1E2E;
  }

  ::v-deep .n-data-table-tr:nth-child(odd) .n-data-table-td {
    background: #182e46;
    color: #fff;

  }

  ::v-deep .n-data-table-tr:nth-child(even) .n-data-table-td {
    background: #0E1E2E;
    color: #fff;
  }

  ::v-deep .n-data-table .n-data-table-tr:hover {
    background-color: #1075C4 !important;
  }

  ::v-deep .n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover>.n-data-table-td {
    background-color: #1075C4 !important;
  }

  ::v-deep .n-data-table .n-data-table-td {
    border-bottom: none !important;
  }
</style>